<template>
  <el-pagination
    class="table-pagination"
    :background="showBackground"
    :prev-text="showIcon?null:'上一页'"
    :next-text="showIcon?null:'下一页'"
    :layout="layout"
    :page-sizes="showSize?[5, 10, 50, 100, 500]:null"
    :current-page="obj.page"
    :page-size="obj.pageSize"
    :total="obj.pageTotal"
    :hide-on-single-page="!showSize&&!showTotal"
    @current-change="pageChangeClick"
    @size-change="sizeChangeClick"
  ></el-pagination>
</template>

<script>
export default {
  name:"mm-table-page",
  props: {
    obj: {// TablePageObj
      type: Object,
      default: function () {
        return null;
      }
    },

    showBackground: {// 是否显示背景色
      type: Boolean,
      default: true
    },

    showIcon: {// 是否显示上一页、下一页的图标
      type: Boolean,
      default: false
    },

    showJumper: {// 是否显示前往第几页
      type: Boolean,
      default: false
    },

    showSize: {// 是否显示条数选择器，[5, 10, 50, 100, 500]
      type: Boolean,
      default: false
    },

    showTotal: {// 是否显示总共多少条
      type: Boolean,
      default: false
    }
  },

  computed: {
    layout() {
      let value = "prev, pager, next";
      if (this.showJumper) {
        value = value + ", jumper";
      }
      if (this.showSize) {
        value = "sizes, " + value;
      }
      if (this.showTotal) {
        value = "total, " + value;
      }
      return value;
    }
  },

  methods: {
    pageChangeClick(index) {
      this.obj.page = index;
      this.$emit("change");
    },

    sizeChangeClick(size) {
      this.obj.pageSize = size;
      this.$emit("change");
    }
  }
}
</script>

<style scoped>
.table-pagination {
  margin-top: 1.5rem;
  text-align: center;
}
</style>